import 'package:flutter/material.dart';
import 'package:flutter_grammar/pages/tabs/category.dart';
import 'package:flutter_grammar/pages/tabs/home.dart';
import 'package:flutter_grammar/pages/tabs/setting.dart';

/* 
AppBar结合TabBar实现顶部Tab切换

tabs 显示的标签内容，一般使用Tab对象,也可以是其他的Widget
controller TabController对象
isScrollable 是否可滚动
indicatorColor 指示器颜色
indicatorWeight 指示器高度
indicatorPadding 底部指示器的Padding
indicator 指示器decoration，例如边框等
indicatorSize 指示器大小计算方式，TabBarIndicatorSize.label跟文字等
宽,TabBarIndicatorSize.tab跟每个tab等宽
labelColor 选中label颜色
labelStyle 选中label的Style
labelPadding 每个label的padding值
unselectedLabelColor 未选中label颜色
unselectedLabelStyle 未选中label的Style


注意：
主动触发侧边栏的步骤
- 在Scaffold组件的State中创建一个key对象，在需要弹出Drawer的时候通过这个key对象来访问ScaffoldState对象。
- 在需要弹出Drawer的按钮策划处理函数中，通过ScaffoldState对象的openDrawer()方法来打开Drawer。


*/

void main() {
  runApp(
      // 入口文件可以是自定义组件 也可以是flutter组件  //去掉debug图标
      MaterialApp(debugShowCheckedModeBanner:false ,  home: Tabs()));
}

class Tabs extends StatefulWidget {
  const Tabs({super.key});

  @override
  State<Tabs> createState() => _TabsState();
}


// 混入SingleTickerProviderStateMixin
class _TabsState extends State<Tabs>  {
  // 定义主动触发drawer的key值
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  int _currentIndex = 0;
  // 引入需要的tab
  final List<Widget> _pages = const [
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 绑定key值
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('FloatingActionButton'),
        backgroundColor: Colors.cyanAccent,
        leading: IconButton(
            icon: const Icon(Icons.menu),
            onPressed: () {
              print('menu Pressed');
              // 在需要触发drawer的地方打开侧边栏
              _scaffoldKey.currentState?.openDrawer(); 
            }),
        actions: <Widget>[
          IconButton(
              icon: const Icon(Icons.search),
              onPressed: () {
                print('Search Pressed');
              }),
          IconButton(
              icon: const Icon(Icons.more_horiz),
              onPressed: () {
                print('more_horiz Pressed');
              })
        ],
      ),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
            BottomNavigationBarItem(icon: Icon(Icons.category), label: "分类"),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: "设置"),
          ],
          currentIndex: _currentIndex,
          onTap: (val) {
            setState(() {
              _currentIndex = val;
            });
          },
          fixedColor: Colors.blueAccent),
      floatingActionButton: (Container(
        height: 48,
        width: 48,
        padding: EdgeInsets.all(0),
        margin: EdgeInsets.only(top: 10),
        decoration: BoxDecoration(
            color: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
            borderRadius: BorderRadius.circular(30)),
        child: FloatingActionButton(
          backgroundColor: _currentIndex == 1 ? Colors.red : Colors.blueAccent,
          onPressed: () {
            setState(() {
              _currentIndex = 1;
            });
          },
          child: Icon(Icons.add),
        ),
      )),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

      // 配置 侧边抽屉
      drawer: DrawerPage(),
      endDrawer: Drawer(
        child: Text('右侧侧边栏'),
      ),
    );
  }
}

class DrawerPage extends StatelessWidget {
  const DrawerPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Drawer(
        child: Column(
      children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: const Text("大地老师"),
          accountEmail: const Text("dadi@itying.com"),
          currentAccountPicture: const CircleAvatar(
            backgroundImage:
                NetworkImage("https://www.itying.com/images/flutter/3.png"),
          ),
          decoration: const BoxDecoration(
              color: Colors.yellow,
              image: DecorationImage(
                  image: NetworkImage(
                      "https://www.itying.com/images/flutter/2.png"),
                  fit: BoxFit.cover)),
          otherAccountsPictures: <Widget>[
            Image.network("https://www.itying.com/images/flutter/4.png"),
            Image.network("https://www.itying.com/images/flutter/5.png"),
            Image.network("https://www.itying.com/images/flutter/6.png")
          ],
        ),
        const ListTile(
          title: Text("个人中心"),
          leading: CircleAvatar(child: Icon(Icons.people)),
        ),
        const Divider(),
        const ListTile(
          title: Text("系统设置"),
          leading: CircleAvatar(child: Icon(Icons.settings)),
        )
      ],
    ));
  }
}
